<template>
    <div class="white-box">
        <title-more title="短信充值" />
        <div class="sms-one">
            当前可用短信数量：<strong>{{ sms_nums }}</strong
            >条
        </div>
        <div class="sms-box">
            <div :class="[{ 'sms-active': cur === index }, 'sms-item']" v-for="(item, index) in smsArrs" :key="index" @click="clickItem(item, index)">
                <div class="sms-item__left">{{ item.title }}</div>
                <div class="sms-item__right">
                    <p class="sms-item__nums">
                        <span>{{ item.nums }}</span
                        >条
                    </p>
                    <p class="sms-item__price">
                        售价：<em>￥</em><span>{{ item.price }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="sms-price">
            支付金额：<em>￥</em><strong>{{ smsObj.price || 0 }}</strong>
        </div>
        <div class="sms-foot">
            <el-popover placement="top" content="您好，暂不支持用户线上充值，请联系您的服务经理进行充值。" :width="280" trigger="click">
                <template #reference>
                    <el-button type="primary">确认充值</el-button>
                </template>
            </el-popover>

            <!-- <el-button type="primary" @click="clickRecharge">确认充值</el-button> -->
        </div>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getSMSNums()
})

const sms_nums = ref(0)
function getSMSNums() {
    proxy.$axios
        .get("sms/capital")
        .then((res) => {
            if (res.data.code == 0) {
                sms_nums.value = res.data.data.remain
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const cur = ref(null)
const smsObj = ref({})
const smsArrs = ref([
    {
        title: "A套餐",
        price: "500.00",
        nums: 5000,
    },
    {
        title: "B套餐",
        price: "1000.00",
        nums: 12000,
    },
    {
        title: "C套餐",
        price: "2000.00",
        nums: 30000,
    },
    {
        title: "D套餐",
        price: "3000.00",
        nums: 50000,
    },
    {
        title: "E套餐",
        price: "5000.00",
        nums: 100000,
    },
    {
        title: "F套餐",
        price: "8000.00",
        nums: 180000,
    },
    {
        title: "G套餐",
        price: "12000.00",
        nums: 300000,
    },
    {
        title: "H套餐",
        price: "20000.00",
        nums: 530000,
    },
])
const clickItem = (item, index) => {
    cur.value = index
    smsObj.value = item
}

// 确认充值
const form_loading = ref(false)
const clickRecharge = () => {
    if (cur.value == null) {
        proxy.$message({ message: "请选择短信套餐", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("", {
            price: price.value,
            percent: percent.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功！", type: "success" })
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
</script>
<script>
export default {
    name: "RechargeSMS",
}
</script>

<style lang="less" scoped>
.sms-foot {
    padding: @padding-xl 0px @padding-mdl;
    text-align: center;
}
.sms-price {
    font-size: @font-size-lg;
    font-weight: bold;
    padding: @padding-xl 0px;
    em {
        color: @red;
    }
    strong {
        color: @red;
        font-size: 22px;
    }
}
.sms-box {
    display: flex;
    flex-flow: row wrap;
    padding: 40px 0px @padding-base;
    border-bottom: 1px solid #ededed;
    .sms-item {
        width: 340px;
        padding: @margin-xl @padding-lg;
        background-color: @gray-1;
        box-shadow: 2px 2px 20px #dbdada;
        position: relative;
        border-radius: @radius-md;
        margin: 0px 50px 40px 0px;
        display: flex;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
        .sms-item__left {
            flex: none;
            font-size: @font-size-lg;
            font-weight: bold;
            color: @black;
            padding: 0 32px;
        }
        .sms-item__right {
            flex: 1;
            border-left: 1px solid #e5e5e5;
            padding-left: 30px;
            .sms-item__nums {
                margin-bottom: @margin-sm;
                font-size: @font-size-md;
                span {
                    color: @themes;
                    font-size: 24px;
                    margin-right: @margin-base;
                }
            }
            .sms-item__price {
                font-size: 15px;
                em {
                    font-size: 13px;
                }
            }
        }
        &:hover,
        &.sms-active {
            background-color: @themes;
            color: #fff;
            box-shadow: 2px 2px 20px #4381e6;
            .sms-item__left {
                color: #fff;
            }
            .sms-item__nums {
                span {
                    color: #fff !important;
                }
            }
        }
    }
}
.sms-one {
    position: relative;
    min-height: 24px;
    padding: 15px 20px;
    background: @gray-1;
    overflow: hidden;
    border-radius: @radius-sm;
    strong {
        color: @red;
        font-size: @line-height-lg;
        margin-right: @margin-base;
    }
    .el-button {
        margin-left: @margin-sm;
    }
}
</style>
